import { NavBar } from 'antd-mobile';
import CommentFooter from '../CommentFooter';
import NoComment from '../NoComment';
import styles from './index.module.scss';
import { useAppDispatch, useAppSelector } from '@/store';
import { getReplyCommentAction, setReplyOriginDataAction } from '@/store/action/comment';
import { useEffect } from 'react';
import CommentItem from '../CommentItem';
import { map } from 'lodash';
export default function CommentReply() {
  const dispatch = useAppDispatch();
  const { replyOriginData, replyCommentData } = useAppSelector((state) => state.comment);
  const { results } = replyCommentData;

  useEffect(() => {
    dispatch(getReplyCommentAction(replyOriginData.com_id, 'c'));
    return () => {
      dispatch({ type: 'comment/setReplyCommentData', payload: {} });
    };
    // eslint-disable-next-line
  }, [dispatch]);

  return (
    <div className={styles.root}>
      <div className="reply-wrapper">
        {/* 顶部导航栏 */}
        <NavBar onBack={() => dispatch(setReplyOriginDataAction({}))} className="transparent-navbar">
          <div>{replyOriginData.reply_count}条回复</div>
        </NavBar>

        {/* 原评论信息 */}
        <div className="origin-comment">
          <CommentItem type="origin" comment={replyOriginData}></CommentItem>
        </div>

        {/* 回复评论的列表 */}
        <div className="reply-list">
          <div className="reply-header">全部回复</div>
          {results?.length ? (
            map(results, (item) => {
              return <CommentItem comment={item} key={item.com_id} type="reply"></CommentItem>;
            })
          ) : (
            <NoComment />
          )}
        </div>

        {/* 评论工具栏，设置 type="reply" 不显示评论和点赞按钮 */}
        <CommentFooter type="reply" />
      </div>
    </div>
  );
}
